import SelectMethod from "./SelectMethod.js";
import Schema from "./Schema.js";
import UrlString from "./UrlString.js";
import ButtonSend from "./ButtonSend.js";
import ContentType from "./ContentType.js";
import DataField from "./DataField.js";

export default {
    inject: ['csrf'],
    components: {
        SelectMethod,
        Schema,
        UrlString,
        ButtonSend,
        ContentType,
        DataField,
    },
    props:  {
        request: Object,
    },
    template: `
        <form action="getUrl()">
            <div class="flexbox wide space-16">
                <div class="box">
                    <div class="custom-mt-14 custom-mb-8">
                        <ButtonSend class="longer" />
                    </div>
                    <div class="custom-my-2">
                        <SelectMethod 
                            class="custom-mr-4"
                            v-model:method="request.method"
                        />
                        <Schema 
                            class="custom-mr-4"
                            v-model:schema="request.schema"
                        />
                    </div>
                    <div class="custom-my-2">
                        <UrlString 
                            class="custom-mr-4 longer"
                            v-model:urlstring="request.urlstring"
                        />
                    </div>
                    <div class="custom-my-2 content-type">
                        <ContentType 
                            v-model:content_type="request.content_type"
                            v-model:custom_content_type="request.custom_content_type"
                        />
                    </div>
                </div>
                <div class="box wide">
                    <DataField 
                        class="width-100"
                        v-model:data="request.data"
                    />
                </div>
            </div>
            <input type='hidden' name='_csrf' value='{{csrf}}'>
        </form>
    `,
    methods:  {
        getUrl() {
            console.log('geturl from form');
            // this.method = this.$refs.SelectMethod.method;
            this.url = this.$refs.UrlString.url;
            // this.data = this.$refs.Schema.data;
            return this.url;
        },
        submit()  {
           this.$emit('submit', this.request);
        }
    }
}
